<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Space Invaders</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css"/>
    <!-- 使用Jquery库 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
<div id="container">
    <div id="paused" class="screen" style="display:none;">
        <p>PAUSED</p>
    </div>
    <div id="help" class="screen" style="display:none;">
        <div>
            <h1>HELP</h1>
            <ul>
                <li><span class="key">&#8593;:</span> Move hero up</li>
                <li><span class="key">&#8595;:</span> Move hero down</li>
                <li><span class="key">&#8592;:</span> Move hero left</li>
                <li><span class="key">&#8594;:</span> Move hero right</li>
                <li><span class="key">Space Bar:</span> Launch a missile</li>
                <li><span class="key">P or p:</span> Pause/Resume</li>
                <li><span class="key">H or h:</span> Show/Hide this screen</li>
            </ul>
        </div>
    </div>
    <div id="start" class="screen">
        <h1>SPACE FIGHT</h1>
        <ul id="instruction">
            <li>1. Destorying an enemy fighter <img src="images/enemy.png" style="width: 30px;height: auto"> gets 0 points of score；</li>
            <li>2. For each enemy fighter <img src="images/enemy.png" style="width: 30px;height: auto"> escaping,  0 point(s) of score is/are lost；</li>
            <li>3. Colliding with an enemy fighter <img src="images/enemy.png" style="width: 30px;height: auto"> gets 0 points of score and 0 of healthiness is lost；</li>
            <li>4. Catching an energy can <img src="images/energy-can.png" style="width: 20px;height: auto"> regains 0% of healthiness；</li>
            <li>5. Loading capacity is 50. Catching an ammo box <img src="images/ammo-box.png" style="height: 20px;width: auto"> gets 0 missiles；</li>
            <li>6. Destroying an energy can <img src="images/energy-can.png" style="width: 20px;height: auto"> loses 0 point(s) and destroying an ammo box <img src="images/ammo-box.png" style="height: 20px;width: auto">, loses
                0 point(s)；</li>
            <li>7. Shot by enemy missile, 0% of healthiness is lost;</li>
            <li>8. When score is 0 or healthiness is 0%, game over。</li>
        </ul>
        <div>
            <input type="text" id="player-name" value="lol" placeholder="PLAYER NAME"/>
            <select name="" id="difficulty">
                <option value="easy">EASY</option>
                <option value="medium">MEDIUM</option>
                <option value="hard">HARD</option>
            </select>

            <button id="start-game-button" onclick="start()">START</button>
            <button id="clear-data" onclick="clear()">CLEAR DATA</button>
        </div>
        <!-- <p>&copy;艺夫作品，用于 JavaScript 教学。2019.07</p> -->
    </div>
    <div id="battle-space" class="screen" style="display:none;">
        <div id="hero"></div>
        <div id="info">
            <ul>
                <li>SCORE: <span id="score" class="data"></span></li>
                <li>
                    HEALTHINESS:
                    <!--   set correct value for each attribute of the meter element  -->
                    <meter
                            id="life-indicator"
                            value="0"
                            min="0"
                            max="0"
                            optimum="0"
                            high="0"
                            low="0"
                    ></meter
                    >
                    <span id="life-indicator-text" class="data">100%</span>
                </li>
                <li>MISSILES: <span id="missile-count" class="data"></span> / <span id="hero-load-capacity" class="data-max"></span></li>
                <li>DIFFICULTY: <span id="difficulty-text" class="data">EASY</span></li>
                <li>PLAYER: <span id="player" class="data"></span></li>
                <li>H: HELP</li>
            </ul>
            <ul>
                <li>ENEMIES: <span id="coming-enemy-count" class="data">0</span> / <span id="enemy-count-max" class="data-max">10</span></li>
                <li>ENEMY MISSILES: <span id="coming-enemy-missile-count" class="data">0</span> / <span id="enemy-missile-count-max" class="data-max">10</span>
                </li>
                <li>AMMO BOXES: <span id="coming-ammo-count" class="data">0</span> / <span id="ammo-box-count-max" class="data-max">10</span></li>
                <li>ENERGY CANS: <span id="coming-can-count" class="data">0</span> / <span id="energy-can-count-max" class="data-max">10</span></li>
            </ul>
        </div>


    </div>
    <div id="game-over" class="screen" style="display:none;">
        <div>
            <h1>GAME OVER !!!</h1>
            <button id="restart-game-button">RESTART</button>
            <table>
                <thead>
                <th>RANK</th>
                <th>PLAYER</th>
                <th>DIFFICULTY</th>
                <th>SCORE</th>
                </thead>
                <tbody id="rank"></tbody>
            </table>
        </div>
    </div>
</div>
<script src="js/game.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
    function start(){
        let game = Game.create($('#difficulty').val(),$('#player-name').val());
        game.start();
    }
</script>
</body>
</html>
